<template>
    <div>
         <van-row>
            <Hearders />
            <van-col span="4">
                <Left />
            </van-col>
            <van-col span="20">
                标题:<input type="text" placeholder="请输入标题">
                
        
                <button>查询</button>&ensp;&ensp;
                <button>重置</button>
                <br><br>
                
                <el-button type="text" @click="centerDialogVisible = true"
                    ><button>新增</button></el-button
                >

                <el-dialog v-model="centerDialogVisible" title="Warning" width="90%" center>
                    <span>
                    
                  {{form}}
              <br>  
            <van-row>
              
            <van-col>
              
              <div>
                
                <el-form>
                  <el-form-item label="标题" style="padding-left: 30px" v-model="form.title">
                    <el-input placeholder="请输入标题" v-model="form.title" style="width: 400px;"/>
                  </el-form-item>

                  <el-form-item label="开始时间">
                    <el-date-picker v-model="form.stime" type="date" placeholder="请选择时间"  style="width: 400px;">
                    </el-date-picker>

                  </el-form-item>


                  <el-form-item label="优先级" style="padding-left: 15px">
                    <el-select v-model="form.priority" placeholder="please select your zone"  style="width: 400px;">
                      <el-option label="低" value="1"></el-option>
                      <el-option label="中" value="2"></el-option>
                      <el-option label="高" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </van-col>

            <van-col>
              <div style="padding-left: 100px">
                <el-form>
                  <el-form-item label="消息类型">
                    <el-select v-model="form.massagetype" placeholder="please select your zone" style="width: 400px" value-format="YYYY-MM-DD">
                      <el-option label="体统消息" value="1"></el-option>
                      <el-option label="通知公告" value="2"></el-option>
                     
                    </el-select>
                  </el-form-item>

                  <el-form-item label="结束时间">
                    <el-date-picker v-model="form.etime" type="date" placeholder="请选择时间" style="width: 400px" value-format="YYYY-MM-DD">
                    </el-date-picker>

                  </el-form-item>


                  <el-form-item label="通告类型">
                    <el-select v-model="form.type" placeholder="please select your zone" style="width: 400px">
                      <el-option label="通知用户" value="1" >
                      </el-option>
                      <el-option label="通知部门" value="2"></el-option>
                      <el-option label="通知所有人" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>

              </div>        
            </van-col>
            
          </van-row>
          <div v-if="form.type == 1">
                <!--xtree展示选人-->
                  {{currentbucket}}

                      <el-tree
                      :data="data"
                      show-checkbox
                      node-key="id"
                      :props="defaultProps"
                      @check="handleBucketClick"
                      
                  />

            </div>
          <div>
                    内容<el-input
                        v-model="form.content"
                        :rows="10"
                        type="textarea"
                        placeholder="Please input"
                    />
            </div>


                    </span>
                    <template #footer>
                    <span class="dialog-footer">
                        <button >取消</button>
                        <button @click="add">确认</button>
                        
                    </span>
                    </template>
                </el-dialog>

                <button>删除</button>&ensp;&ensp;
                
                <van-uploader :after-read="afterRead"  >
                    <button>导入</button>
                </van-uploader>&ensp;&ensp;
                <button @click="daochu">导出</button>&ensp;&ensp;
                <br>
                <br>
                
                <table border="1px" cellspacing='0px' width='900px'>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>标题</td>
                        <td>内容</td>
                        <td>消息类型</td>
                        <td>优先级</td>
                        <td>通告对象</td>
                        <td>状态</td>
                        <td>发布时间</td>
                        <td>操作</td>
                    </tr>
                    <tr  v-for="i in meslist" align='center'>
                        <td><input type="checkbox"></td>
                        <td>{{i.title}}</td>
                        <td>{{i.content}}</td>
                        <td>
                            <p v-if="i.messagetype == 1">系统消息</p>
                            <p v-if="i.messagetype == 2">通知公告</p>
                        </td>
                        <td>
                            <p v-if="i.priority == 1">低</p>
                            <p v-if="i.priority == 2">中</p>
                            <p v-if="i.priority == 3">高</p>
                        </td>
                        <td>
                            <p v-if="i.type == 1">通知用户</p>
                            <p v-if="i.type == 2">通知部门</p>
                            <p v-if="i.type == 3">通知所有人</p>
                        </td>
                        <td>
                            <p v-if="i.status == 1">已发布</p>
                            <p v-if="i.status == 2">未发布</p>
                            
                            
                        </td>
                        <td>{{i.stime}}</td>
                        <td>
                            <button>更多</button>
                        </td>
                    </tr>
                </table>
            </van-col>

        </van-row>
    </div>
</template>

<script>
import Hearders from '../comm/hearders'

import Left from '../comm/left.vue'
import Mycomany from '../comm/mycomany.vue'
//分装
import axios from '../../http/axios'
    export default {
        components: { Hearders ,Left,Mycomany}, 
        data() {
            return {
                meslist:[],
                centerDialogVisible: false,
                // userid:localStorage.getItem('userid'),
                form:{'priority':'','title':'','stime':'','messagetype':'','etime':'','type':'','content':'','userid':localStorage.getItem('userid')},
                //树 数据
                data:[],
                //下一个审批人 选中的人id
                currentbucket:[],
            }
        },
        methods: {
          //获取用户的id
          handleBucketClick(v){
                // console.log(v.sid);
                this.currentbucket.push(v.sid);
                ;
                },
          //通知单个人
          getnextlead(){
                axios('/users/getlead/','get').then(res=>{
                    this.data = res.list
                })
            },
          //添加消息
          add(){
              
              let data = new FormData()
              data.append('userid',this.userid)
              data.append('idlst',this.JSON.stringify(currentbucket))
              data.append('data',JSON.stringify(this.form))
              axios('/message/getmessage/','post',data).then(res=>{
                    
                })
          },
          //获取消息
            getmessage(){
                axios('/message/getmessage/?userid='+this.userid,'get').then(res=>{
                    this.meslist = res.list
                })
            }
        },
        mounted() {
            this.getmessage()
            this.getnextlead()
        },
    }
</script>

<style scoped>

</style>